<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件详情</title>
    <link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<div class="container">
    <h1>文件详情</h1>

    <!-- 文件信息 -->
    <div class="file-info">
        <p><strong>文件名:</strong> <span th:text="${file}"></span></p>
        <p><strong>大小:</strong> <span th:text="${size}"></span></p>
        <p><strong>类型:</strong> <span th:text="${type}"></span></p>
    </div>

    <!-- 预览区域 -->
    <div class="preview-area">
        <h3>文件预览</h3>
        <div th:if="${type.startsWith('image/')}" class="image-preview">
            <img th:src="@{'/uploads/' + ${file}}" alt="图片预览">
        </div>
        <div th:if="${type == 'text/plain' || type == 'text/html' || type == 'application/json'}" class="text-preview">
            <pre th:text="${T(cn.hutool.core.io.FileUtil).readUtf8String('uploads/' + file)}"></pre>
        </div>
        <div th:if="${type == 'application/pdf'}" class="pdf-preview">
            <iframe th:src="@{'/uploads/' + ${file}}" width="100%" height="600px"></iframe>
        </div>
        <div th:if="${type.startsWith('audio/')}" class="audio-preview">
            <audio controls>
                <source th:src="@{'/uploads/' + ${file}}" th:attr="type=${type}">
                您的浏览器不支持音频播放
            </audio>
        </div>
        <div th:if="${type.startsWith('video/')}" class="video-preview">
            <video width="100%" controls>
                <source th:src="@{'/uploads/' + ${file}}" th:attr="type=${type}">
                您的浏览器不支持视频播放
            </video>
        </div>
        <div th:unless="${type.startsWith('image/') or type == 'text/plain'
                or type == 'text/html' or type == 'application/json'
                or type == 'application/pdf' or type.startsWith('audio/') or type.startsWith('video/')}">
            <p>不支持此文件类型的预览</p>
        </div>
    </div>

    <!-- 操作按钮 -->
    <div class="action-buttons">
        <a href="/" class="btn">返回首页</a>
        <a th:href="@{/download/{name}(name=${file})}" class="btn primary">下载文件</a>
    </div>
</div>
</body>
</html>